<template>
  <PageWrapper title="账单管理" >
    <PreviewDate />
    <Form :model="filterState" layout="inline" class="bg-white mb-2 p-2 pt-6 pb-6" >
      <FormItem label="日期时间" name="rangeDate" >
        <RangePicker showTime v-model:value="filterState.rangeDate" />
      </FormItem>
      <FormItem>
        <Button @click="onReset" class="mr-2">重置</Button>
        <Button type="primary" :icon="h(SearchOutlined)" @click="onSearch" >搜索</Button>
      </FormItem>
    </Form>

    <BasicTable @register="tableRegister" >
      <template #action="{ record }">
        <TableAction :actions="[{
          label: '查看详情', 
          onClick: onTableDetail.bind(null, record)
          }]" />
      </template>
    </BasicTable>

    <BillDetailModal @register="billModalRegister" />
    
  </PageWrapper>
</template>

<script lang="ts" setup >
import { get } from 'lodash-es'
import { h, reactive } from 'vue'
import * as Api from '@/api/bill'
import { useRequest } from '@vben/hooks'
import { SearchOutlined } from '@ant-design/icons-vue'
import { tableColumns } from './tableOptions';
import { PageWrapper } from '@/components/Page'
import { useModal } from '@/components/Modal'
import { Form, FormItem, RangePicker, Button } from 'ant-design-vue'
import { BasicTable, useTable, TableAction } from '@/components/Table'
import BillDetailModal from './BillDetailModal.vue'
import PreviewDate from '@/components/PreviewDate'

const { loading, data: tableData, run } = useRequest(Api.getBillList);

const useForm = Form.useForm;

const [billModalRegister, { openModal: openBillModal }] = useModal();

const [tableRegister] = useTable({
  loading,
  columns: tableColumns,
  dataSource: tableData,
  actionColumn: {
    title: "操作",
    width: "120px",
    dataIndex: "action",
    slots: { customRender: "action" }
  }
});

const filterState = reactive({
  rangeDate: undefined
})

const { resetFields } = useForm(filterState)

function onTableDetail(e: any) {
  console.log('查看详情 ', e);
  openBillModal(true, e);
}

function onReset() {
  resetFields();
  run('');
}

function onSearch() {
  if (filterState.rangeDate) {
    const [startDate, endDate] = get(filterState, 'rangeDate', ['', '']) as [string, string];
    if (startDate && endDate) {
      run(`${startDate}/${endDate}`)
    }
  } else {
    run('')
  }
}

</script>
